<!--
 * @Descripttion: 
 * @version: 
 * @Author: dudu
 * @Date: 2020-02-18 09:53:54
 * @LastEditors  : dudu
 * @LastEditTime : 2020-02-20 16:05:36
 -->
<template>
  <div class="home">
    <el-table
      :data="tableData"
      border
      style="width: 50%"
      :span-method="objectSpanMethod"
    >
      <el-table-column
        v-for="(item, index) in tableHeaders"
        :key="index"
        :prop="item.name"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  name: "home",
  data() {
    return {
      tableHeaders: [
        { name: "grade", label: "年级" },
        { name: "class", label: "班级" },
        { name: "group", label: "小组" },
        { name: "name", label: "姓名" }
      ],
      tableData: [
        {
          grade: "一年级",
          class: "二班",
          group: "一组",
          name: "张三",
          id: 1
        },
        {
          grade: "一年级",
          class: "三班",
          group: "二组",
          name: "王五",
          id: 2
        },
        {
          grade: "一年级",
          class: "三班",
          group: "二组",
          name: "李四",
          id: 3
        },
        {
          grade: "二年级",
          class: "二班",
          group: "一组",
          name: "小明",
          id: 4
        }
      ]
    };
  },
  methods: {
    //   是否为合并初始行，分组数据，当前行，当前列索引
    calcIsHeader(groupByObjs, groupByName, row) {
      return groupByObjs.some(groupByObj => {
        if (groupByObj[row[groupByName]]) {
          const target =
            groupByObj[row[groupByName]].findIndex(
              item => item.id === row.id
            ) === 0;
          if (target) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      });
    },
    calcRowspan(groupByObjs, groupByName, row) {
      let target;
      let length = 0;
      groupByObjs.some(groupByObj => {
        if (groupByObj[row[groupByName]]) {
          target = groupByObj[row[groupByName]].find(
            item => item.id === row.id
          );
          if (target) {
            length = groupByObj[row[groupByName]].length;
            return true;
          }
        }
        return false;
      });
      return length;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const groupByName = this.tableHeaders[columnIndex].name;
      if (columnIndex === 0) {
        const groupByObj = _.groupBy(this.tableData, groupByName);
        if (this.calcIsHeader([groupByObj], groupByName, row)) {
          return {
            rowspan: this.calcRowspan([groupByObj], groupByName, row),
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      if (columnIndex === 1) {
        const groupByObj1 = _.groupBy(this.tableData.slice(0, 3), groupByName);
        const groupByObj2 = _.groupBy(this.tableData.slice(3), groupByName);
        if (this.calcIsHeader([groupByObj1, groupByObj2], groupByName, row)) {
          return {
            rowspan: this.calcRowspan(
              [groupByObj1, groupByObj2],
              groupByName,
              row
            ),
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
        // console.log(
        //   this.calcRowspan([groupByObj1, groupByObj2], groupByName, row)
        // );
      }
      if (columnIndex === 2) {
        const groupByObj1 = _.groupBy(this.tableData.slice(0, 1), groupByName);
        const groupByObj2 = _.groupBy(this.tableData.slice(1, 3), groupByName);
        const groupByObj3 = _.groupBy(this.tableData.slice(3), groupByName);

        if (
          this.calcIsHeader(
            [groupByObj1, groupByObj2, groupByObj3],
            groupByName,
            row
          )
        ) {
          return {
            rowspan: this.calcRowspan(
              [groupByObj1, groupByObj2, groupByObj3],

              groupByName,
              row
            ),
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
        console.log(
          this.calcRowspan([groupByObj1, groupByObj2], groupByName, row)
        );
      }
    }
  }
};
</script>
<style></style>
